<template>
	<u-mask :show="pwdShow">
		<view class="box u-flex align-center justify-center">
			<view class="content backFFF r-32">
				<view class="u-flex align-center ">
					<u-icon name="close" color="#666666" size="32" @click="pwdShow = false"></u-icon>
					<p class="u-font-36 f-w-6 color333 u-flex-1 u-text-center">{{title}}</p>
				</view>

				<p class="u-font-60 f-w-5 color333 u-flex-1 u-text-center u-m-t-40 u-p-b-40 borderD8"> <span v-if='type' >￥</span> {{money}}</p>
				<view class="service" v-if='service_rate'><p class="name">服务费</p>    <p class="service_value">￥{{service_money}}</p></view>
				<view class="service" v-if='service_rate'><p class="name">费率</p>    <p class="service_value">{{service_rate}}%（最低￥1.00）</p></view>
				<u-message-input ref="cInput" class="u-m-t-60" :dot-fill="true" :focus="isfocus" :breathe="false" :maxlength="6" @finish="finish"></u-message-input>

			</view>
		</view>
	</u-mask>
</template>

<script>
export default {
	props: {
		//文字方向
		money: {
			type: [Number,String],
			default: 0
		},
		//提示标题
		title: {
			type: String,
			default: '请输入支付密码'
		},
		type:{
			type: String,
		},
		service_money:{
			type: Number,
			default: 0
		},
		service_rate:{
			type: String,
		}
		
	},
	data() {
		return {
			pwdShow: false,
			isfocus: false
		};
	},
	mounted() {},
	methods: {
		show(){
			this.pwdShow = !this.pwdShow
			if(this.pwdShow) this.isfocus = true
		},
		finish(e) {
			this.$emit('confim',e);
		},
		clearInput(){
			this.$refs.cInput.clearInput()
		}
	}
};
</script>

<style scoped lang="scss">
	.box{
		width: 100%;
		height: 100%;
	}
	.content{
		width: 540rpx;
		min-height: 462rpx;
		padding: 48rpx 42rpx 60rpx 42rpx;
	}
	/deep/.u-char-flex{
		padding: 0 !important;
		margin: 0 !important;
	}
	/deep/.u-box{
		background-color: #E6E6E6;
		border: none;
		width: 60rpx !important;
		height: 60rpx !important;
		margin: 0 15rpx 0 0;
		padding: 0;
	}
	.service{
		width: 100%;
		height: auto;
		padding-top: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		.name{
			color: #999999;
		}
		.service_value{
			color: #333333;
		}
	}
	
</style>
